<template>
    <div class="order-payment">
        <!-- 支付方式 -->
        <OrderPanel>
            <template #header>支付方式 </template>
            <template #main>
                <div class="payment">
                    <el-button
                        @click="active(item, data)"
                        text
                        v-for="item in data"
                        :key="item"
                        :class="{ active: item.active }"
                        >{{ item.name }}</el-button
                    >
                </div>
            </template>
        </OrderPanel>
    </div>
</template>

<script setup>
import OrderPanel from './order-panel.vue'
import { reactive, ref } from 'vue'
const data = reactive([
    { id: 1, name: '在线支付', active: true },
    { id: 2, name: '货到付款', active: false },
])
let paymentId = ref('')
const active = (item, data) => {
    for (const i of data) {
        i.active = false
    }
    paymentId.value = item.id
    item.active = true
}
</script>

<style lang="scss" scoped>
.payment {
    .el-button {
        width: 240px;
        height: 60px;
        font-size: 16px;
        color: #da9233;
        border: 1px solid silver;
        transition: all 0.3s ease;
        &.active {
            background-color: rgba(232, 232, 232, 0.719);
        }
    }
}
</style>
